<template>

  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      width="550px"
      @closed="closed"
    >
      <el-form ref="formData" :model="formData" :rules="rules" style="padding: 20px;" >

        <el-form-item label-width="100px" label="主机名称" prop="name">
          <el-input v-model="formData.name" placeholder="主机名称" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="主机系统" prop="name">
          <el-select v-model="formData.os" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="主机IP" prop="ip">
          <el-input v-model="formData.ip" placeholder="主机ip" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="主机端口" prop="port">
          <el-input v-model="formData.port" placeholder="主机端口" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="项目磁盘" prop="projectPath">
          <el-input v-model="formData.projectPath" placeholder="项目磁盘" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="备注" prop="remark">
          <el-input v-model="formData.remark"  :rows="3" type="textarea" placeholder="请输入备注信息(250字符内)." />
        </el-form-item>

      </el-form>

      <div style="text-align: right;" slot="footer" class="dialog-footer">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import {
    saveTerminal,
  } from '@/api/biz/terminal'
  export default {
    name: 'InfoDrawer',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData.id = value.data.id || ''
            this.formData.name = value.data.name || ''
            this.formData.os = value.data.os || ''
            this.formData.ip = value.data.ip || ''
            this.formData.port = value.data.port || ''
            this.formData.remark = value.data.remark || ''
            this.formData.projectPath = value.data.projectPath || ''
            this.formData.physicalMemory = value.data.physicalMemory || ''
            this.formData.gpuNum = value.data.gpuNum || 0
            this.formData.gpuMemory = value.data.gpuMemory || ''

          } else {
            this.formData.id =''
            this.formData.name = ''
            this.formData.os=''
            this.formData.ip = ''
            this.formData.port = ''
            this.formData.remark = ''
            this.formData.projectPath = ''

            this.formData.physicalMemory = ''
            this.formData.gpuNum =  0
            this.formData.gpuMemory =  ''

          }
          if (value.type) {
            this.type = value.type
            if (value.type === '0') {
              this.title = '登记主机'
            }
            if (value.type === '1') {
              this.title = '编辑主机'
            }
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        formData: {
          id: '',
          name: '',
          os: '',
          ip:'',
          port: '',
          remark: '',
          projectPath:'',
          physicalMemory:'',
          gpuNum:'',
          gpuMemory:''
        },
        options:[
          {
            value: 'win',
            label: 'Windows'
          }
        ],
        rules: {
          name: [{
            required: true,
            message: '请输主机名称',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
          ],
          os: [{
            required: true,
            message: '请输入操作系统.',
            trigger: 'blur'
          }
          ],
          ip: [{
            required: true,
            message: '请输入主机ip.',
            trigger: 'blur'
          }
          ],
          port: [{
            required: true,
            message: '请输入主机端口.',
            trigger: 'blur'
          }
          ],
          projectPath: [{
            required: true,
            message: '请输入项目磁盘.',
            trigger: 'blur'
          }
          ],
          desc: [{
              min: 0,
              max: 250,
              message: '长度在 0 到 250 个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created() {
    },
    methods:{
      submitForm: function() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            saveTerminal(this.formData).then(rsp => {
              if(200==rsp.code){
                this.$message({
                  type: 'success',
                  message:rsp.message
                })
              }
              this.closed()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style scoped>

</style>
